<template>
  <div class="chart-container hide-scroller-bar">
    <div style="height: 24%; min-height: 160px">
      <EnergyTotal />
    </div>
    <div style="height: 30%; min-height: 220px">
      <EventTotal />
    </div>
    <a-row
      :style="
        'height: 20%;min-height:' +
        (isMobile ? col2MinHeight * 2 : col2MinHeight) +
        'px'
      "
      :gutter="12"
    >
      <a-col
        :xs="24"
        :sm="12"
        :style="isMobile ? 'height: 50%' : 'height: 100%'"
      >
        <EquipmentOperation />
      </a-col>
      <a-col
        :xs="24"
        :sm="12"
        :style="isMobile ? 'height: 50%' : 'height: 100%'"
      >
        <MeetingRoomUseRate />
      </a-col>
    </a-row>
    <a-row
      :style="
        'height: 24%; padding-top: 0.5rem;min-height:' +
        (isMobile ? col2MinHeight * 2 : col2MinHeight) +
        'px'
      "
      :gutter="12"
    >
      <a-col
        :xs="24"
        :sm="12"
        :style="isMobile ? 'height: 50%' : 'height: 100%'"
      >
        <CarTotal />
      </a-col>
      <a-col
        :xs="24"
        :sm="12"
        :style="isMobile ? 'min-height: 50%' : 'height: 100%'"
      >
        <EnvironmentTotal />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, computed, reactive, toRefs } from "vue";
// 能耗统计
import EnergyTotal from "./EnergyTotal.vue";
// 事件统计
import EventTotal from "./EventTotal.vue";
// 设备运行
import EquipmentOperation from "./EquipmentOperation.vue";
// 会议室使用率
import MeetingRoomUseRate from "./MeetingRoomUseRate.vue";
// 人车数量
import CarTotal from "./CarTotal.vue";
// 室内环境质量统计
import EnvironmentTotal from "./EnvironmentTotal.vue";
import store from "../../../../store";

export default defineComponent({
  name: "Synthetical",
  components: {
    EnergyTotal,
    EventTotal,
    EquipmentOperation,
    MeetingRoomUseRate,
    CarTotal,
    EnvironmentTotal,
  },
  setup() {
    const state = reactive({
      col2MinHeight: 160,
    });
    /** -----适配移动端 start -----**/
    const isMobile = computed(() => store.getters.dataVMobile);
    /** -----适配移动端 end -----**/
    return {
      isMobile,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
